<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>
<template>
  <div>
    <div :v-show="isShow">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span :v-bind="cid">{{cid}}订阅列表</span>
          <el-button style="float: right; padding: 3px 0" type="text"
            >操作按钮</el-button
          >
        </div>
        <div v-for="(item, idx) in subTableData" :key="idx" class="text item">
          {{ item }}
        </div>
      </el-card>
    </div>

    <el-table :data="tableData" style="width: 100%" max-height="100%">
      <el-table-column prop="client_id" label="客户端id" width="120">
      </el-table-column>
      <el-table-column prop="ip" label="地址" width="150"> </el-table-column>
      <el-table-column prop="heartbeat" label="心跳" width="50">
      </el-table-column>
      <el-table-column prop="is_alive" label="连接状态" width="120">
      </el-table-column>
      <el-table-column prop="connect_at" label="连接时间" width="120">
      </el-table-column>

      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small"
          >
            移除
          </el-button>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="getClientTopic(scope.$index, tableData)"
            type="text"
            size="small"
          >
            详细信息
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  mounted() {
    this.getClientData();
  },
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    getClientTopic(index, rows) {
      this.cid = rows[index].client_id
      this.subTableData = rows[index].sub_list
    },

    getClientData() {
      var th = this;
      this.$axios({
        method: "get",
        url: "/dhb_client/table_data",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      }).then((res) => {
        th.tableData = [];
        th.tableData = res.data.dc;
      });
    },
  },
  data() {
    return {
      tableData: [],
      isShow: false,

      cid: "",
      subTableData: [],
    };
  },
};
</script>
